import React from 'react';
import styled from 'styled-components';
import OptionSection from './OptionSection';

const AmountWrapper = styled.div`
    width: 65vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    > .amount {
        text-align: center;
        font-size: 3em;
        transition: color 0.35s ease;
        &.outcome {
            color: #35D06C;
        }
        &.income {
            color: #D92027;
        }
    }
    > .expression {
        padding-right: 10px;
        text-align: right;
        color: #BDBDBD;
        font-size: 1.2em;
        height: 1.2em;
    }
`

type Props = {
    selectedType: 'outcome' | 'income'
    amount: string,     // 总金额字符串
    expression: string, // 金额表达式
}

const Amount:React.FC<Props> = (props) => {

    return (
        <OptionSection iconName={props.selectedType} labelName="金额">
            <AmountWrapper>
                <div className={"amount " + props.selectedType}>
                    {
                        props.amount === '' ? '0.00' :    // '' => '0.00'
                            props.amount.indexOf('.') === -1 ? props.amount + '.00' :   // '0' or 'x' => '0.00' or 'x.00'
                                props.amount.indexOf('.') === props.amount.length - 1 ? props.amount + '00' :   // '0.' or 'x.' => '0.00' or 'x.00'
                                    props.amount.indexOf('.') === props.amount.length - 2 ? props.amount + '0' :    // '0.0' or 'x.x' => '0.00' or 'x.x0'
                                        props.amount    // '0.00' or 'x.xx'
                    }
                </div>
                <div className="expression">{props.expression}</div>
            </AmountWrapper>
        </OptionSection>
    );
};


export default Amount;